<template>
  <div class="club-list-container">
    <el-container class="content-wrapper">
      <el-aside style="width: 20%; margin-top: 20px">
        <div class="club-search">
          <el-form :model="queryRequest" ref="searchFormRef">
            <el-form-item label="社团编号" prop="clubId">
              <el-input
                v-model="queryRequest.id"
                placeholder="请输入社团编号"
              />
            </el-form-item>
            <el-form-item label="社团名" prop="clubName">
              <el-input
                v-model="queryRequest.clubName"
                placeholder="请输入社团名"
              />
            </el-form-item>
            <el-form-item label="社团标签" prop="clubTags">
              <el-input-tag
                v-model="queryRequest.tags"
                placeholder="输入标签内容后回车"
              />
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-aside>

      <el-main style="width: 80%">
        <div class="club-list">
          <el-table
            :data="paginatedClubList"
            stripe
            style="width: 100%"
            size="large"
          >
            <el-table-column prop="clubId" label="社团编号" width="100" />
            <el-table-column prop="clubName" label="社团名" width="180" />
            <el-table-column
              prop="managerName"
              label="社长用户名"
              width="150"
            />
            <el-table-column label="社团标签" width="200">
              <template #default="scope">
                <el-tag
                  v-for="tag in scope.row.clubTags"
                  :key="tag"
                  class="mx-1"
                  size="small"
                >
                  {{ tag }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="clubIntroduction"
              label="社团简介"
              show-overflow-tooltip
            />
            <el-table-column width="100">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleDetails(scope.row.clubId)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-button type="primary" @click="handleCreateClub"
              >创建社团</el-button
            ><el-pagination
              v-model:current-page="queryRequest.current"
              v-model:page-size="queryRequest.pageSize"
              :total="totalItems"
              @current-change="handlePageChange"
              layout="total, prev, pager, next"
              class="mt-4"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { ClubControllerService } from "../../../../generated";
import type { ClubQueryRequest } from "../../../../generated";
import type { ClubVO } from "../../../../generated";
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";

interface ClubInfo {
  clubId: number;
  clubName: string;
  clubTags: string[];
  clubIntroduction: string;
  managerName: string;
}

const totalItems = ref(0);
const clubList = ref<ClubInfo[]>([]);
const queryRequest = ref<ClubQueryRequest>({
  pageSize: 10,
  current: 1,
}) as ClubQueryRequest;

const loadData = async () => {
  const res = await ClubControllerService.listClubVoByPage(queryRequest.value);
  if (res.code === 0) {
    const clubVOList = res.data?.records as ClubVO[];
    clubList.value = clubVOList.map(
      (clubVO) =>
        ({
          clubId: clubVO.id,
          clubName: clubVO.clubName,
          clubIntroduction: clubVO.introduction,
          clubTags: clubVO.tags,
          managerName: clubVO.userVO?.userName,
        }) as ClubInfo,
    );
    totalItems.value = res.data?.records.length;
  } else {
    ElMessage.error("数据加载错误，请重试: " + res.message);
  }
};

// 处理数据分页
const paginatedClubList = computed(() => {
  const start = (queryRequest.value.current - 1) * queryRequest.value.pageSize;
  const end = start + queryRequest.value.pageSize;
  return clubList.value.slice(start, end);
});

onMounted(() => {
  loadData();
});

const handleSearch = () => {
  queryRequest.current = 1;
  loadData();
};

const handleReset = () => {
  queryRequest.id = 0;
  queryRequest.tags = [];
  queryRequest.clubName = "";
  queryRequest.current = 1;
};

const handlePageChange = (page: number) => {
  queryRequest.current = page;
  loadData();
};

const router = useRouter();
const handleDetails = (clubId: number) => {
  router.push({
    path: "/club/details",
    query: { clubId: clubId },
  });
};

// 添加创建社团的处理函数
const handleCreateClub = () => {
  window.open("/application/add/create-club", "_blank");
};
</script>

<style scoped lang="scss">
.club-list-container {
  padding: 20px;
}

.content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden;
}

.el-aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}

.club-search {
  height: 100%;
}

.club-search .el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.club-search .button-group {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.club-search .button-group .el-button {
  margin-left: 10px;
}

.el-main {
  padding: 20px;
}

.club-list {
  margin-top: 0;
}

.el-tag {
  margin-right: 5px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.el-pagination {
  margin-top: 0;
}
</style>
